<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
				margin: 0;
				padding: 0;
			}
			
			/*
			 * 设置outer的样式
			 */
			#outer{
				/*设置宽和高*/
				width: 520px;
				height: 333px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: orange;
				/*设置padding*/
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出的内容*/
				overflow: hidden;
			}
			
			/*设置imgList*/
			#ulList{
				/*去除项目符号*/
				list-style: none;
        /* 这里宽度写死了不好，最好在JavaScript中动态设置 */
				/*设置ul的宽度*/
				width: 2600px;
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/
				/*
				 * 每向左移动520px，就会显示到下一张图片
				 */
				left: 0px;
			}
			
			/*设置图片中的li*/
			#ulList li{
				/*设置浮动*/
				float: left;
				/*设置左右外边距*/
				margin: 0px 10px;
			}
      /* #ulList li{
        margin-bottom: 10px;
      } */
      #navDiv{
        position: absolute;
        /* background: red; */
        /*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
         /* 导航栏居中也可以通过动态设置 */
				/* left: 197px; */
        /* left: 200px; */
        bottom: 20px;
        height: 15px;
        /* width: 135px; */
      }
      #navDiv a{
        float: left;
        height: 100%;
        width: 15px;
        border-radius: 50%;
        /* border: 1px solid palegreen; */
        margin: 0px 5px;
				/*设置背景颜色*/
				background-color: palevioletred;
				/*设置透明*/
				opacity: 0.5;
      }
			#navDiv a:hover{
        background-color: black;
      }
  </style>
  <script type="text/javascript" src="./tools.js"></script>
  <script type="text/javascript">
  </script>
</head>
<body>
  <div id="outer">
    <ul id="ulList">
      <li><img src="../img/1.jpg"></li>
      <li><img src="../img/2.jpg"></li>
      <li><img src="../img/3.jpg"></li>
      <li><img src="../img/4.jpg"></li>
      <li><img src="../img/5.jpg"></li>
      <li><img src="../img/1.jpg"></li>
    </ul>
    <div id="navDiv">
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
    </div>
  </div>
  <script type="text/javascript">
  window.onload = function () {
    var ulList = document.getElementById('ulList')
    var imgArr = document.getElementsByTagName('img')
    // 设置ul的宽度
    ulList.style.width = 520*imgArr.length + 'px'
    // 设置导航栏动态居中
    var navDiv = document.getElementById('navDiv')
    var outer = document.getElementById('outer')
    navDiv.style.left = (outer.offsetWidth-navDiv.offsetWidth)/2+ "px";
    /*
    点击超链接切换到指定的图片
      点击第一个超链接，显示第一个图片
      点击第二个超链接，显示第二个图片
    * 
    */
    var aArr = document.getElementsByTagName('a')
    // 设置导航栏a标签默认选中的效果
    // aArr[index].style.backgroundColor = 'black'

    var index = 0;
    for (var i=0;i<aArr.length;i++) {
      //为每一个超链接都添加一个num属性
      aArr[i].num = i;
      aArr[i].onclick = function () {
          // 这里不能用i作为索引，因为是先执行for再来里面的点击事件，此时都是5了
          // alert(this.num)
        //关闭自动切换的定时器
          clearInterval(timer);
          index = this.num
          //切换图片
						/*
						 * 第一张  0 0
						 * 第二张  1 -520
						 * 第三张  2 -1040
						 */
          // // 修改选中的导航栏a标签
          setA()
          //使用move函数来切换图片
          move(ulList , "left" , -520*index , 20 , function(){
            //动画执行完毕，开启自动切换
            // console.log(22)
            autoChange()
            // console.log(33)
          });
          // // ulList.style.left = -520*index + 'px'


      }
    };

    // 自动切换图片
    autoChange()

    // 定义一个函数，自动切换图片
    var timer
    function autoChange () {
      // console.log(12)
      // clearInterval(timer)
      timer = setInterval(function () {
        index++
        // 判断index的值
        // 这里是图片的长度！！！
        // index %=imgArr.length
        if (index >imgArr.length-1) {
          index = 0
        }
          //执行动画，切换图片
          move(ulList,'left',-520*index,20,function(){
            // 修改导航按钮
            setA()
          })
      },1000)
    }



    // 创建一个方法设置选中的a
    function setA () {
      // 判断当前索引是否是最后一张图片(第6张默认成第一张)
      if (index>=imgArr.length-1) {
        console.log(index)
        index = 0
        //此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
        //通过CSS将最后一张切换成第一张
        ulList.style.left = 0;
      }

      for (var i=0;i<aArr.length;i++) {
        // 这里由于设置的是内联样式，级别较高，
        //所以原来的hover样式失效了，所以直接写成默认的就行
        // aArr[i].style.backgroundColor = 'red'
        aArr[i].style.backgroundColor = ''
      }
      // 将选中的a标签设置为黑色
      console.log(index)
      aArr[index].style.backgroundColor = 'black'
    }
  }
  </script>
</body>
</html>